<template>
  <div>
    <!-- 按钮 -->
    <el-button style="margin:10px" type="primary" icon="el-icon-refresh-right" circle
      @click="pageCommodityList"></el-button>
    <el-button style="margin:10px" @click="allPassPassDynamic">一键审核</el-button>
    <el-input placeholder="请输入搜索内容在点击搜索" v-model="searchText" style="width:300px;background-color: #fff;">
      <el-button slot="append" icon="el-icon-search" @click="pageCommodityList"></el-button>
    </el-input>
    <el-button style="margin:10px" @click="reSetting">重置</el-button>
    <!-- 表格
      data 展示数据 —— 数组类型
    -->
    <el-table ref="multipleTable" style="width: 100%;" border :data="list" @selection-change="SelectionChange">
      <el-table-column type="selection" width="55" align="center">
      </el-table-column>
      <el-table-column prop="name" label="商品名称" width="80" align="center">
      </el-table-column>
      <el-table-column prop="intro" label="商品介绍" width="100" align="center">
      </el-table-column>
      <el-table-column prop="classificationName" label="商品分类" align="center">
      </el-table-column>
      <el-table-column label="商品图片" align="center">
        <template slot-scope="{ row, $index }">
          <el-image v-for="(item, index) in row.picUrl.split(',')" :key="index"
            style="width: 40px; height: 40px; margin-right: 5px;" :src="$staticURL + item" v-if="item"
            @click="clickevaluatePicture(row)" :preview-src-list="evaluatePictureList">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="商品价格" align="center">
      </el-table-column>
      <!--     <el-table-column label="图片" align="center">
                <template slot-scope="{ row, $index }">
          <el-image style="width: 40px; height: 40px; margin-right: 5px;" :src="$staticURL+row.picUrl" v-if="row.picUrl">
          </el-image>
                  </template>
      </el-table-column> -->
      <!-- <el-table-column label="视频" align="center">
        <template slot-scope="{ row, $index }" v-if="row.videoUrl">
          <video :src="'https://www.yushiai.com.cn/'+row.videoUrl" controls="controls"
            style="width:60px;height:60px;"></video>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="上架时间" align="center" width="100">
      </el-table-column> -->
      <el-table-column label="审核结果" align="center" width="100"
        :filters="[{ text: '审核驳回', value: '-1' }, { text: '未审核', value: '0' }, { text: '审核通过', value: '1' }]"
        :filter-method="filterTag" filter-placement="bottom-end">
        <template slot-scope="{ row, $index }">
          <p v-if="row.status === -1">审核驳回</p>
          <p v-else-if="row.status === 0">未审核</p>
          <p v-else-if="row.status == 1">审核通过</p>

        </template>
      </el-table-column>
      <el-table-column label="驳回原因" align="center">
        <template slot-scope="{ row, $index }">
          <p v-if="row.status == -1">{{ row.reason }}</p>
        </template>
      </el-table-column>
      <!--     <el-table-column label="下架原因" align="center">
        <template slot-scope="{ row, $index }">
          {{ row.auditResult }}
        </template>
      </el-table-column> -->
      <el-table-column label="操作" width="200" align="center">

        <template slot-scope="{ row, $index }">
          <template v-if="row.status == 0">
            <!-- <el-button type="primary" icon="el-icon-edit" circle></el-button> -->
            <el-popconfirm title="是否通过该商品？" icon="el-icon-info" icon-color="red" @confirm="getPassDynamic(row.id)">
              <el-tooltip content="通过商品" placement="top" slot="reference">
                <el-button type="success" icon="el-icon-check"></el-button>
              </el-tooltip>
            </el-popconfirm>
            <el-popconfirm style="margin-left:10px" title="是否驳回该商品？" icon="el-icon-info" icon-color="red"
              @confirm="getRejectDynamic(row)">
              <el-tooltip content="驳回商品" placement="top" slot="reference">
                <el-button type="danger" icon="el-icon-close"></el-button>
              </el-tooltip>
            </el-popconfirm>
          </template>
          <template v-if="row.status == 1">
            <el-popconfirm style="margin-left:10px" title="是否下架该商品？" icon="el-icon-info" icon-color="red"
              @confirm="offShelfDynamic(row)">
              <el-tooltip content="下架商品" placement="top" slot="reference">
                <el-button type="danger" icon="el-icon-delete"></el-button>
              </el-tooltip>
            </el-popconfirm>

          </template>
        </template>
      </el-table-column>
    </el-table>










    <!-- 分页 -->
    <el-pagination style="margin-top:20px;text-align:center" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" :current-page="pageNumber" :page-sizes="[10, 50, 100]" :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>

<script>
import {
  MessageBox,
  Message
} from 'element-ui'
export default {
  name: 'shopGoods',
  mounted() {
    //获取列表数据方法
    this.pageCommodityList()
  },
  data() {
    return {
      // 一键审核
      multipleSelection: [],

      toExamine: [],
      auditResult: '',
      //页码
      pageNumber: 1,
      //每页数量
      pageSize: 10,
      //总条数
      total: 0,
      //列表数据
      list: [],
      ids: [],
      // ids:[],
      //搜索
      searchText: '',
      evaluatePictureList: [],
    }
  },
  methods: {

    SelectionChange(toExamine) {
      console.log(toExamine, '>>>>>>><<<<<<<');
      this.toExamine = toExamine
    },
    // 点击评价图片，大图预览多张图片
    clickevaluatePicture(row) {
      var srclist = []
      for (const imgArr of row.picUrl.split(',')) {
        // 把数据库传来的图片放进数组里
        srclist.push('https://www.yushiai.com.cn/' + imgArr)
      }
      this.evaluatePictureList = srclist // 赋值
    },
    // 一键审核
    async allPassPassDynamic() {
      let list = []
      this.toExamine.forEach(element => {
        if (element.status == 0) {
          list.push(element.id)
        }
      })

      list = list.join(',')
      let res = await this.$API.goods.allPassCommodity({
        ids: list
      })
      console.log(res, 'sh');
      this.pageCommodityList()
    },
    handleSelectionChange(val) {
      console.log(val)
      this.ids = val.filter(function (item) {
        return item.auditStatus == 0
      }).map((item, index) => {
        return item.id;
      }).join(",");
      console.log(this.ids)
    },
    // 分页获取商品审核列表
    async pageCommodityList() {
      let res = await this.$API.shop.pageCommodityList({
        pageNumber: this.pageNumber,
        pageSize: this.pageSize,
        searchText: this.searchText
      })
      this.toExamine = res
      this.total = res.data.sumLine;
      this.list = res.data.rows;
      // console.log(this.list, '审核列表');
    },
    reSetting() {
      this.searchText = '';
      this.pageCommodityList();
    },
    async getPassDynamic(id) {
      let res = await this.$API.shop.passCommodity({
        id: id,
        auditResult: '审核通过'
      })
      this.pageCommodityList()
    },
    async getRejectDynamic(row) {
      console.log(row, 'row');
      let auditResult = prompt('驳回原因：');
      if (auditResult != null && auditResult != "") {
        let res = await this.$API.shop.rejectCommodity({
          id: row.id,
          auditResult: auditResult
        })
        this.pageCommodityList()
        // console.log(auditResult, '驳回');
        return row.reason = auditResult
      }
    },
    async offShelfDynamic(row) {
      let reason = prompt('下架原因：');
      if (reason != null && reason != "") {
        console.log(this.$API.goods, 'api');
        let res = await this.$API.goods.adminCommodityDown({
          commodityIds: String(row.id),
          reason,
        })
        console.log(res, '下架了');
        this.pageCommodityList()
      }
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val
      this.pageCommodityList()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageNumber = val
      this.pageCommodityList()
    },
    filterTag(value, row) {
      console.log(value, row, '这是')
      return row.status == Number(value);
    },
    filterHandler(value, row, column) {
      // const property = column['property'];
      // return row[property] === value;
    }
  }
}
</script>

<style></style>
